<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"> 

<html>

<head>
	<title>Moxie</title>

	<style type="text/css">
		@import "../../../../dojo/resources/dojo.css";
		@import "../../../../dijit/themes/tundra/tundra.css";
		
		/* Bring in the CSS for the default 
		   Dojo Offline UI widget */
		@import "../../../../dojox/off/resources/offline-widget.css";
    </style>

	<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true"></script>
	<script type="text/javascript" src="../../../../dojox/off/offline.js"></script>
	<script type="text/javascript" src="editor.js"></script>
	
	<style type="text/css">
		body, html { padding: 1em; }
		#fileWidget label { font-weight: bold; }
		select { display: block; }
		
		#wrapper { clear: both; }
		#title { clear: none; background-color: #9DADB9; width: 100%; position: absolute; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 0px 6px; border: 0px; height: 1em; }
		#title a { color: black; text-decoration: none; }
		#fileWidget { width: 13em; margin-bottom: 1em; }
		#content-container { width: 100%; margin-left: -13.5em; float: right; margin-top: 2em; z-index: 1; position: relative; }
		#content { margin-left: 13.5em; padding-left: 30px; overflow: hidden; }
		#sidebar { float: left; width: 13.5em; margin-top: 2em; z-index: 2; position: relative; }
		#storageKeyContainer { margin-bottom: 1em; }
		#directoryContainer { margin-bottom: 1em; }
		#storageKey { width: 10em; }
		#directory { width: 10em; }
		#storageKey, #directory { margin-top: 0.3em; }
		#saveButton { margin-left: 0.2em; }
		
		.widget { border: 2px solid #CDDDE9; }
		.widgetTitleBar { background-color: #CDDDE9; padding-top: 0.2em; padding-bottom: 0.2em; }
		.widgetTitleText { vertical-align: middle; font-weight: bold; font-size: 14pt; padding-left: 2px; } 
		.widgetContents { padding: 8px 5px 8px 5px; }
		.status { position: absolute; right: 5px; padding-left: 5px; padding-right: 5px; background: red; color: white; }
		.firebug { clear: both;}
	</style>
</head>

<body class="tundra">
	<div id="top">
		<h1 id="title"><a href="about.html" target="_new">Moxie</a></h1>
	</div>
	
	<div id="wrapper">
		<div id="sidebar">
			<div id="fileWidget" class="widget">
				<div class="widgetTitleBar">
					<span class="widgetTitleText">
						Files
					</span>
				</div>
				
				<div class="widgetContents">
					<div id="storageKeyContainer">
						<label for="storageKey">
							File Name:
						</label>
						
						<input type="text" id="storageKey" name="storageKey">
						
						<button id="saveButton">Save</button>
					</div>
						
					<div id="directoryContainer">
						<label for="storageKey">
							Load File:
						</label>
						
						<select id="directory" size="1"></select>
					</div>
				</div>
			</div>
		
			<!-- 
				Place the Dojo Offline widget here; it will be automagically
			 	filled into any element with ID "dot-widget".
			 -->
			<div id="dot-widget"></div>	
		</div>
		
		<div id="content-container">
			<div id="content">
				<div id="editorWidget" class="widget">
					<div class="widgetTitleBar">
						<span class="widgetTitleText">
							Editor
						</span>
					</div>
					
					<div class="widgetContents">
					    <textarea   id="storageValue"
									dojoType="dijit._editor.RichText"
									minHeight="20em"
									styleSheets="../../../../dojo/resources/dojo.css">
							Click Here to Begin Editing
						</textarea>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>
